<div class="row">
    <div class="col-sm-12">
        <div class="wrapper wrapper-content animated fadeInUp">

            <div class="ibox-content m-b-sm border-bottom">
                <div class="text-center p-lg">
                    <h2>如果没有找到您需要的问题</h2>
                    <span>您可以点击</span>
                    <button title="Create new cluster" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> <span
                            class="bold">在线提问</span>
                    </button>
                    按钮
                </div>
            </div>
            <div class="faq-item">
                <div class="row">
                    <div class="col-sm-8">
                        <a data-toggle="collapse" href="faq.html#faq1" class="faq-question">微点应用小程序云是干什么的？</a>
                        <small><strong>小妹回复：</strong> <i class="fa fa-clock-o"></i> 今天15:34</small>
                    </div>
                    <div class="col-sm-4 text-right">
                        <button type="button"   class="btn btn-w-m zan btn-white"> <i class="fa fa-thumbs-o-up"></i>有用（10）</button>
                        <button type="button" class="btn btn-w-m chedan btn-white"> <i class="fa fa-thumbs-o-down"></i>扯淡（10）</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div id="faq1" class="panel-collapse collapse faq-answer">
                            <p>
                               我们是一个快速搭建自己的小程序平台
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    (function ($) {
        $.extend({
            tipsBox: function (options) {
                options = $.extend({
                    obj: null,  //jq对象，要在那个html标签上显示
                    str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                    startSize: "12px",  //动画开始的文字大小
                    endSize: "30px",    //动画结束的文字大小
                    interval: 600,  //动画时间间隔
                    color: "red",    //文字颜色
                    callback: function () { }    //回调函数
                }, options);
                $("body").append("<span class='num'>" + options.str + "</span>");
                var box = $(".num");
                var left = options.obj.offset().left + options.obj.width() / 2;
                var top = options.obj.offset().top - options.obj.height();
                box.css({
                    "position": "absolute",
                    "left": left + "px",
                    "top": top + "px",
                    "z-index": 9999,
                    "font-size": options.startSize,
                    "line-height": options.endSize,
                    "color": options.color
                });
                box.animate({
                    "font-size": options.endSize,
                    "opacity": "0",
                    "top": top - parseInt(options.endSize) + "px"
                }, options.interval, function () {
                    box.remove();
                    options.callback();
                });
            }
        });
    })(jQuery);
    function niceIn(prop){
        prop.find('i').addClass('niceIn');
        setTimeout(function(){
            prop.find('i').removeClass('niceIn');
        },1000);
    }
    $(function () {
        $(".zan").click(function () {
            $.tipsBox({
                obj: $(this),
                str: "+1",
                callback: function () {
                }
            });
            niceIn($(this));
        });
        $(".chedan").click(function () {
            $.tipsBox({
                obj: $(this),
                str: "+1",
                color : '#afafaf',
                callback: function () {
                }
            });
            niceIn($(this));
        });
    });
</script>